<template>
    <div>
      <r-tab></r-tab>
    <div class="comments">
      <div class="box">
        <Form :model="setOpinion" class="form">
          <FormItem prop="content" class="textarea" style="margin:0.5rem 0;">
              <Input v-model="setOpinion.content" size="large" type="textarea" :autosize="{minRows: 7,maxRows: 7}" placeholder="请输入你的宝贵意见"></Input>
          </FormItem>
          <FormItem prop="is_show" class="select" style="margin:0.8rem 0;">
              <Select v-model="setOpinion.is_show" label="实名意见" style="color:#b3b3b3;text-align:left;" size="large">
                  <Option value="留下您的联系方式">留下您的联系方式</Option>
                  <Option value="匿名提交">匿名提交</Option>                  
              </Select>
              <img src="../assets/nl/tri.png" alt="">
          </FormItem>
          <FormItem prop="name" v-if="hide1" style="margin:0.8rem 0;">
              <Input v-model="setOpinion.name" placeholder="请输入联系人名称" size="large"></Input>
          </FormItem>
          <FormItem prop="phone" v-if="hide2" class="inputNum" style="margin:0.8rem 0;">
              <Input v-model="setOpinion.phone" placeholder="请输入联系方式" size="large"></Input>
          </FormItem>
        </Form>
      </div>
      <Button class="btn" type="primary" @click="sure">确定</Button>            
    </div>
    </div>
</template>
       
<script>
import RTab from '../components/rTab'
export default {
  name: "comments",
  components: {RTab},
  data() {
    return {   
      flag: true,
      timerID: null,
      hide1:true,
      hide2:true,
      setOpinion: {
        content: "",
        is_show: "",
        phone: "",
        name: ""
      }
    };
  },
  created() {
    this.clientHeight = `${document.documentElement.clientHeight}`;
    this.clientWidth = `${document.documentElement.clientWidth}`;
    this.setOpinion.is_show="留下您的联系方式";
    this.$Message.config({
        top: 210,
        duration: 1
    });    
  },
  watch:{
    setOpinion:{
      handler:function(newVal,oldVal) {                                            
          this.setOpinion.is_show=newVal.is_show;
          this.isHide();           
      },
      deep:true
    }
  }, 
  methods: {
    isHide:function(){
      if(this.setOpinion.is_show=="留下您的联系方式"){
            this.hide1=true;
            this.hide2=true;
          }else{
            this.hide1=false;
            this.hide2=false;
          }
    },
    success:function() {      
        this.$Message.success('提交信息成功');        
    },
    warning:function(){
        this.$Message.warning('请把信息填写完整。');
    },
    sure: function() {
      var val=1;
      if(this.setOpinion.is_show=="留下您的联系方式"){
        val=1;
      }
      if(this.setOpinion.is_show=="匿名提交"){
        val=2;
      }
      console.log(val);
      this.$axios({
        method: "post",
        url: "https://vip.gznewpark.com/dist/admin/public/index.php/wx/Opinion/setOpinion",
        data: {
          content: this.setOpinion.content,
          is_show: val,
          phone: this.setOpinion.phone,
          name: this.setOpinion.name
        }
      }).then(response => {        
        if (response.data.status == 0) {                                                        
            if(this.setOpinion.content&&val==1){
              if(this.setOpinion.phone==''||this.setOpinion.name==''){
                // var tips=response.data.message;
                // this.$Message.warning(tips);
                this.warning()
              }else{
                this.success();   
                var _that=this;
                setTimeout(function(){_that.$router.push('/');  }, 2000);                            
              }
            }else{
               var tips=response.data.message;
               this.$Message.warning(tips);
            }
            if(this.setOpinion.content&&val==2){   
              var _that=this;        
              setTimeout(function(){_that.$router.push('/');  }, 2000);
            }
        } else if (response.data.status == -1) {
          var tips=response.data.message;
          this.$Message.warning(tips);
        } else if (response.data.status == 40005) {          
          var tips=response.data.message;
          this.$Message.warning(tips);
        }
      });
    }
  }
};
</script>

<style lang="scss">
.comments {
  box-sizing: border-box;
}
.warn {
  font-size: 1rem;
  color: orangered;
  width: 78%;
  height: 2.5rem;
  padding-top: 2.4rem;
  position: absolute;
  top: 40%;
  left: 10%;
}
.ok {
  color: green !important;
}
@media screen and (max-width: 410px) {
  .comments {
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 1rem;
    .box {
      background-color: #fff;
      padding-left: 3.5%;
      padding-right: 3.5%;
      padding-top: 0.5rem;
      padding-bottom: 1.5rem;
      border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
      box-shadow: 0.2rem 0.2rem 2rem #ebedfa;
      .form {
        .select {
          position: relative;
          img {
            width: 0.8rem;
            position: absolute;
            right: 0.6rem;
            top: 0.8rem;
          }
        }
      }
    }
    .btn {
      margin-top: 1rem;
      width: 100%;
      font-size: 1.2rem;
      font-weight: 600;
      border-radius: 0.8rem 0.8rem 0.8rem 0.8rem;
      background-color: #d2a661!important;
      border: 0.1rem solid #d2a661!important;
    }
  }
}
@media screen and (min-width: 411px) {
  .comments {
    padding-left: 3.5%;
    padding-right: 3.5%;
    padding-top: 1rem;
    position: relative;
    .box {
      background-color: #fff;
      padding-left: 3.5%;
      padding-right: 3.5%;
      padding-top: 0.5rem;
      padding-bottom: 1.5rem;
      border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
      box-shadow: 0.2rem 0.2rem 2rem #ebedfa;
      .form {
        .select {
          position: relative;
          img {
            width: 0.8rem;
            position: absolute;
            right: 0.6rem;
            top: 0.8rem;
          }
        }
        .inputNum {
        }
      }
    }
    .btn {
      margin-top: 1rem;
      width: 100%;
      font-size: 1.2rem;
      font-weight: 600;
      border-radius: 0.8rem 0.8rem 0.8rem 0.8rem;
      background-color: #d2a661!important;      
      border: 0.1rem solid #d2a661!important;
    }
  }
}
</style>
